<template>
  <div class="details" >
    <van-skeleton v-if="!detailList.video">
      <template #template>
        <div class="con" :style="{ display: 'flex', width: '100%' }">
          <van-skeleton-image :style="{ width: '100%', height: '150rem' }" />
          <div class="row" :style="{ flex: 1, marginLeft: '16px' }">
            <van-skeleton-paragraph row-width="60%" />
            <van-skeleton-paragraph v-for="item in 3"/>
            
          </div>

          <div class="small" v-for="item in 2">
            <van-skeleton-image />
            <div class="row" :style="{ flex: 1, marginLeft: '16px' }">
              <van-skeleton-paragraph row-width="60%" />
              <van-skeleton-paragraph v-for="item in 3"/>
             
            </div>
          </div>
        </div>
      </template>
    </van-skeleton>
    <div v-else>
      <div class="vedio">
        <video controls width="375" autoplay ref="video">
          <!-- <source src="/media/cc0-videos/flower.webm" type="video/webm" /> -->
          <source
            :src="detailList.video.content.progressive[2].url"
            type="video/mp4"
            v-if="detailList.video.content.progressive[2]"
          />
          <source
            :src="detailList.video.content.progressive[0].url"
            type="video/mp4"
            v-else
          />
        </video>

        <!-- <img src="" alt="" /> -->

        <!-- <van-icon
        class="play"
        name="pause-circle-o"
        @click="pause"
        v-if="isPlay"
      /> -->
        <!-- <van-icon class="play" name="play-circle-o" @click="play" v-else /> -->
        <van-icon
          class="back"
          name="arrow-left"
          size="22rem"
          color="#fff"
          @click="router.back()"
        />
      </div>

      <div class="bar">
        <van-tabs v-model:active="active" color="red">
          <van-tab title="简介">
            <div class="text">
              <h3>{{ detailList.title }}</h3>
              <div class="time">
                <span v-for="categories in detailList.categories">{{
                  categories.category_name
                }}</span>
                <!-- <span>520-13-14</span> -->
                <span
                  >{{ NumberFilter(detailList.count.count_view) }}次播放</span
                >
              </div>
              <p>{{ detailList.content }}</p>
            </div>
            <div class="numbers">
              <ul>
                <li>
                  <van-icon
                    name="good-job-o"
                    color="red"
                    size="22"
                    @click="removeFabulous(detailList.id)"
                    v-if="likeList.indexOf(detailList.id) != -1"
                  />
                  <van-icon
                    name="good-job-o"
                    color="#000"
                    size="22"
                    @click="addFabulous(detailList.id)"
                    v-else
                  />
                  <span>{{
                    NumberFilter(
                      likeList.indexOf(detailList.id) != -1
                        ? detailList.count?.count_like + 1
                        : detailList.count?.count_like
                    )
                  }}</span>
                </li>

                <li>
                  <van-icon name="star-o" color="#000" size="22" />
                  <span>{{
                    NumberFilter(detailList.count?.count_collect)
                  }}</span>
                </li>
                <li @click="showShare = true">
                  <!-- <van-cell title="" @click="showShare = true" > -->

                  <van-icon name="guide-o" color="#000" size="22" />
                  <span>{{ NumberFilter(detailList.count?.count_share) }}</span>
                  <!-- </van-cell> -->
                </li>
                <van-share-sheet
                  v-model:show="showShare"
                  title="立即分享给好友"
                  :options="options"
                  @select="onSelect"
                />
              </ul>
            </div>
            <div class="type">
              <span v-for="type in detailList.tags">{{ type.name }}</span>
            </div>
            <div class="author">
              <h3>创作人</h3>
              <div
                class="info"
                @click="toUserinfo(detailList.author.userinfo.id)"
              >
                <div class="avatar">
                  <img :src="detailList.author.userinfo.avatar" alt="" />
                  <div class="name">
                    <p class="username">
                      {{ detailList.author.userinfo.username }}
                    </p>
                    <span>{{ detailList.author.role }}</span>
                  </div>
                </div>
                <div class="follow">
                  <p
                    @click.stop="addFollow(detailList.author.userinfo.id)"
                    v-if="arr.indexOf(detailList.author.userinfo.id) == -1"
                  >
                    关注
                  </p>
                  <p
                    @click.stop="removeFollow(detailList.author.userinfo.id)"
                    v-else
                  >
                    已关注
                  </p>
                </div>
              </div>
            </div>
            <div class="resemble">
              <h3>相关视频</h3>
              <div class="resemblelist">
                <div
                  class="item"
                  v-for="list in resemblelist"
                  :key="list.id"
                  @click="toDetail(list.id)"
                >
                  <div class="vedio">
                    <van-image
                      width="170rem"
                      height="90rem"
                      :src="list.cover"
                      radius="10rem"
                    >
                      <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                      </template>
                    </van-image>
                  </div>
                  <div class="text">
                    <div class="title">
                      <p>
                        {{ list.title }}
                      </p>
                    </div>
                    <div class="numbers">
                      <span>播放量</span>
                      <span>{{ NumberFilter(list.count.count_view) }}</span>
                      <span>喜欢</span>
                      <span>{{ NumberFilter(list.count.count_like) }}</span>
                    </div>
                    <div class="author">
                      <div class="avatar">
                        <img :src="list.author.userinfo.avatar" alt="" />
                      </div>
                      <div class="name">
                        <p>{{ list.author.userinfo.username }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="评论">
            <div class="list">
              <div class="item" v-for="comment in commentsilList">
                <div class="avatar">
                  <img :src="comment.userInfo.avatar" alt="" />
                </div>
                <div class="text">
                  <p class="name">{{ comment.userInfo.username }}</p>
                  <p class="content" v-html="comment.content"></p>
                  <div class="bottom">
                    <div class="time">
                      <span>{{ TimeFilter(comment.addtime) }}</span>
                    </div>
                    <div class="right">
                      <div class="reply">
                        <van-icon name="comment-o" size="16" />
                      </div>
                      <van-icon name="good-job-o" size="16" />
                      <span>{{ NumberFilter(comment.count_approve) }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="comment">
              <van-cell is-link @click="showPopup">
                <input type="text" placeholder="我有话要说"
              /></van-cell>
              <van-popup
                v-model:show="show"
                position="bottom"
                :style="{ height: '30%' }"
              >
                <input
                  type="text"
                  placeholder="我有话要说"
                  v-model="comment"
                  ref="getfocus"
                />
                <div
                  @click="
                    stopPopup();
                    commenting(detailList.id);
                  "
                >
                  发布
                </div>
              </van-popup>
            </div>
          </van-tab>
        </van-tabs>
        <!-- <span class="quantity">{{ commentsilList.length }}</span> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, watch } from "vue";
import { useRouter } from "vue-router";
import { getDetailList, getCommentsList, getResembleList } from "../api/index";
import { computed } from "@vue/runtime-core";
import { showToast } from "vant";

const active = ref(0);
const detailList = ref([]);
const commentsilList = ref(
  JSON.parse(localStorage.getItem("commentsilList")) || []
);
const $router = useRouter();
const id = ref("");
id.value = $router.currentRoute.value.query.id;
// console.log(id.value);
const arr = ref(JSON.parse(localStorage.getItem("arr")) || []);
const followList = ref(JSON.parse(localStorage.getItem("followList")) || []);
const resemblelist = ref([]);
const router = useRouter();
const comment = ref([]);
const count_like = ref([]);
const likeList = ref(JSON.parse(localStorage.getItem("likeList")) || []);

getDetailList(id.value).then((res) => {
  detailList.value = res.data.data;
  if (likeList.value.length == 0) {
    count_like.value = detailList.value.count.count_like;
  }
  console.log(detailList.value);
});

function getCommentsFun(id) {
  // console.log(commentsilList.value.length);
  commentsilList.value = commentsilList.value.filter(
    (o) => o.resource_id == id
  );

  if (commentsilList.value.length == 0) {
    getCommentsList(id)
      .then((res) => {
        commentsilList.value = res.data.data.list;
        // console.log(commentsilList.value);
      })
      .catch((err) => {
        return;
      });
  }
}
getCommentsFun(id.value);

getResembleList(id.value).then((res) => {
  resemblelist.value = res.data.data.list;
  // console.log(resemblelist.value);
});

function toDetail(toid) {
  router.replace({
    path: "/detail",
    query: {
      id: toid,
    },
  });
  id.value = toid;
}

//点赞
function addFabulous(id) {
  count_like.value += 1;
  likeList.value.push(id);
  console.log(likeList.value);
  localStorage.setItem("likeList", JSON.stringify(likeList.value));
}

//取消点赞
function removeFabulous(id) {
  console.log(111);
  count_like.value -= 1;
  likeList.value = likeList.value.filter((o) => o != id);
  console.log(likeList.value);

  localStorage.setItem("likeList", JSON.stringify(likeList.value));
}
//播放
const isPlay = ref(true);
const video = ref(null);
// function play() {
//   isPlay.value = true;
//   video.value.play();
// }

//暂停
// function pause() {
//   isPlay.value = false;
//   video.value.pause();
// }

const getfocus = ref(null);
const pageInstance = ref(null);

const show = ref(false);
const showPopup = () => {
  show.value = true;
  // getfocus.value.focus();

  console.log(getfocus.value);
};
const stopPopup = () => {
  show.value = false;
};

//关注
function addFollow(id) {
  let a = JSON.parse(localStorage.getItem("arr")) || [];
  arr.value = [id, ...a];
  localStorage.setItem("arr", JSON.stringify(arr.value));
  let followList = ref(JSON.parse(localStorage.getItem("followList")) || []);

  followList.value = [...followList.value, detailList.value.author];
  // console.log(followList.value);
  localStorage.setItem("followList", JSON.stringify(followList.value));
}

//取消关注
function removeFollow(id) {
  // console.log(route.query.id);
  // let id = route.query.id;
  let a = JSON.parse(localStorage.getItem("arr")) || [];
  arr.value = a.filter((o) => o != id);
  localStorage.setItem("arr", JSON.stringify(arr.value));
  followList.value = followList.value.filter((o) => o.userinfo.id != id);
  localStorage.setItem("followList", JSON.stringify(followList.value));
}

//评论
function commenting(id) {
  if (comment.value > 0) {
    console.log(comment.value);
    commentsilList.value.push({
      addtime: new Date() / 1000,
      content: comment.value,
      count_approve: 0,
      resource_id: id,
      userInfo: {
        avatar: "/public/assets/avatar.jpg",
        username: "Alex",
      },
    });

    localStorage.setItem(
      "commentsilList",
      JSON.stringify(commentsilList.value)
    );
  } else {
    showToast({
      message: "请输入内容",
      center: true,
    });
  }
}

function toUserinfo(id) {
  router.push({
    path: "/userinfo",
    query: {
      id,
    },
  });
}

const showShare = ref(false);
const options = [
  { name: "微信", icon: "wechat" },
  { name: "微博", icon: "weibo" },
  { name: "复制链接", icon: "link" },
  { name: "分享海报", icon: "poster" },
  { name: "二维码", icon: "qrcode" },
];

const onSelect = (option) => {
  showToast(option.name);
  showShare.value = false;
};

watch(id, (newX) => {
  console.log(`x is ${newX}`);
  detailList.value = [];
  getDetailList(newX).then((res) => {

    detailList.value = res.data.data;
    console.log(detailList.value);
  });

  getCommentsFun(newX);

  getResembleList(newX).then((res) => {
    resemblelist.value = res.data.data.list;
    console.log(resemblelist.value);
  });
});

const NumberFilter = computed(() => {
  return (value) => {
    // console.log(value);
    if (value < 10000) {
      return value;
    } else {
      let w = value > 10000 ? value / 10000 : value;
      let y = w > 10000 ? (w / 10000).toFixed(1) + "亿" : w.toFixed(1) + "万";
      return y;
    }
  };
});
const TimeFilter = computed(() => {
  return (value) => {
    // const time = new Date(value).toLocaleString();

    let data = new Date(value * 1000);
    let year = data.getFullYear();

    let month = (data.getMonth() + 1).toString().padStart(2, "0");
    let date = data.getDate().toString().padStart(2, "0");
    let hour = data.getHours().toString().padStart(2, "0");
    let minute = data.getMinutes().toString().padStart(2, "0");
    return `${year}-${month}-${date} ${hour}:${minute}`;

    // console.log(data.toLocaleString());
    // return data.toLocaleString();
    //  return time
  };
});
</script>

<style lang="scss" scoped>
.details {
  .vedio {
    position: relative;
    img {
      width: 100%;
      height: 100rem;
    }
    .play {
      font-size: 36rem;
      // width: 40rem;
      // height: 40rem;
      // background-color: coral;
      color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      // margin-top: -20rem;
      // margin-left: -20rem;
      transform: translate(-50%, -50%);
    }
    .back {
      position: absolute;
      top: 10rem;
      left: 10rem;
    }
  }
  .text {
    h3 {
      font-size: 18rem;
      color: #000;
      font-weight: bold;
      padding: 15rem 20rem;
      display: -webkit-box;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    .time {
      padding: 0 20rem;

      margin-bottom: 15rem;
      span {
        font-size: 12rem;
        color: #999;
        margin-right: 20rem;
      }
    }
    p {
      padding: 0 20rem;
      display: -webkit-box;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      font-size: 12rem;
      color: #666;
    }
  }
  .numbers {
    padding: 20rem;
    border-bottom: 2rem solid #f5f5f5;
    ul {
      display: flex;
      justify-content: space-around;
      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        span {
          font-size: 12rem;
          color: #000;
          margin-top: 5rem;
          font-weight: bold;
        }
      }
    }
  }
  .type {
    padding: 20rem;
    border-bottom: 2rem solid #f5f5f5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    span {
      padding: 5rem 10rem;
      background-color: #f7f7f7;
      font-size: 12rem;
      color: #666;
      text-align: center;
      border-radius: 5rem;
      margin-right: 10rem;
      margin-top: 10rem;
    }
  }
  .author {
    padding: 20rem;
    width: 320rem;
    h3 {
      font-size: 16rem;
      color: #000;
      font-weight: bold;
      padding: 20rem 0;
    }
    .info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0px 0px 3px 1px #bdbdbd;
      padding: 20rem 15rem 20rem 0;
      .avatar {
        display: flex;
        // flex-direction: column;
        align-items: center;

        img {
          width: 50rem;
          height: 50rem;
          border-radius: 50%;
          margin: 0 10rem 0rem 15rem;
        }
        .name {
          .username {
            font-size: 14rem;
            color: #000;
            font-weight: bold;
            width: 98rem;
          }
          span {
            display: block;
            width: 95rem;
            font-size: 12rem;
            color: #999;
          }
        }
      }
      .follow {
        font-size: 14rem;
        color: red;
        padding: 5rem 20rem;
        text-align: center;
        border-radius: 15rem;
        background-color: #fdeee9;
        width: 88rem;
      }
    }
  }
  .list {
    padding: 20rem 20rem 30rem 20rem;
    width: 100%;

    .item {
      display: flex;
      margin-bottom: 20rem;
      .avatar {
        // margin-right: 10rem;
        img {
          width: 35rem;
          height: 35rem;
          border-radius: 50%;
        }
      }
      .text {
        border-bottom: 1rem solid #f5f5f5;
        width: 300rem;

        .name {
          font-size: 12rem;
          color: #666;
        }
        .content {
          font-size: 14rem;
          color: #000;
          // font-weight: bold;
          margin: 5rem 0rem 10rem 0rem;
        }
        .bottom {
          display: flex;
          justify-content: space-between;
          // align-items: center;
          .time {
            margin-bottom: 10rem;
            span {
              font-size: 12rem;
              color: #999;
            }
          }
          .right {
            display: flex;
            justify-content: space-between;
            .reply {
              margin-right: 20rem;
            }
            span {
              margin-left: 5rem;
              font-size: 12rem;
              color: #666;
            }
          }
        }
      }
    }
  }
  .comment {
    padding: 12rem;

    position: fixed;
    bottom: -1rem;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 10;
    border-top: 1rem solid #c1c0c0;

    input {
      width: 100%;
      height: 30rem;
      padding: 0rem 12rem;
      font-size: 14rem;
      border: none;
      background-color: #f1efef;
      border-radius: 5rem;
    }
  }
  .resemble {
    width: 100%;
    h3 {
      font-size: 16rem;
      color: #000;
      font-weight: bold;
      padding: 0 20rem;
    }
    .resemblelist {
      padding: 0 15rem;
      .item {
        display: flex;
        border-bottom: 2rem solid #f5f5f5;
        padding: 15rem 0;
        // align-items: center;
        .vedio {
          margin-right: 10rem;
          img {
            width: 170rem;
            height: 90rem;
            border-radius: 10rem;
          }
        }
        .text {
          width: 165rem;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          .title {
            p {
              padding: 0;
              font-size: 14rem;
              color: #000;
              font-weight: bold;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              // height: 40rem;
            }
          }
          .numbers {
            padding: 0;
            border: none;
            span {
              font-size: 12rem;
              color: #999;
              margin-right: 5rem;
            }
          }
          .author {
            width: 100%;
            padding: 0;
            display: flex;
            align-items: center;
            .avatar {
              img {
                width: 15rem;
                height: 15rem;
                border-radius: 50%;
                margin-right: 15rem;
              }
            }
            .name {
              p {
                padding: 0;
                width: 120rem;
                font-size: 14rem;
                color: #666;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }
        }
      }
    }
  }
  .bar {
    position: relative;
    .quantity {
      position: absolute;
      top: 14rem;
      right: 62rem;
      font-size: 14rem;
      color: red;
    }
  }
  .van-cell:v-deep(.van-cell__right-icon) {
    font-size: 0;
    margin: 0;
  }
  .van-cell {
    padding: 0;
  }
  .comment::v-deep .van-popup--bottom {
    display: flex;
    justify-content: space-between;
    padding: 12rem 0rem 0rem 12rem;
    input {
      width: 80%;
    }
    div {
      font-size: 14rem;
      color: #999;
      padding: 4rem 12rem;
      // font-weight: bold;
    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #fff;
  }
  .van-skeleton {
    margin-top: 20rem;
  }
  .con {
    flex-direction: column;
  }
  .row {
    margin-top: 20rem;
  }
  .small {
    display: flex;
    margin-top: 50rem;
    .row {
      margin-top: 0rem;
    }
  }
}
</style>